<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>angular模板示例</title>
    <style type="text/css">
        ul{
            float: left;
            width:100%;
            margin:0px;
            padding: 0px;
        }
        li{
            list-style:none;
            float: left;
            margin-right:15px;
        }
        iframe{
            float: left;
            margin-top:20px;
            width:500px;
            height:500px;
        }
        li a.active{
            color:red;
        }
    </style>
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <script type="text/javascript" src="controller/indexCtrl.js"></script>
</head>
<body ng-app="myApp">
<ul ng-controller="indexCtrl as iC">
    <li ng-repeat="item in iC.menuData"><a href="{{item.href}}" target="loadPage" ng-class="{'active':iC.isActive==$index}" ng-click="iC.isActive=$index">{{item.name}}</a></li>
</ul>
<iframe src="view/table01.html" name="loadPage"></iframe>
</body>
</html>